<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>左青龙右白虎中间居中</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>

<body>
<div>
    <!--
       要理解这个,你就把float当定位,left就是定位到左边,right就是定位到右边
       ,唯一的区别在于,它并不会遮挡掉上浮上来的文字(行内块),这些文字会环绕

       left是尽量向左向上
       right是尽量向右向上

       向上受制于上面是不是独占一行的元素,只要不是,就可向上(除非这个独占一行的元素,也float了,并且这个独占一行float的方向和下面要浮上来的margin负值方向设置的是一致的,比如float:left,相对应的只能设置margin-left:-xx)
    -->
    <div style="float:left;text-align:center;width:100%;">中间是标题</div>
    <div class="left" style="float:left;margin-left:-100%;">左青龙</div>
    <div class="right" style="float:left;margin-left:-48px;">右白虎</div>
    <!--<div style="text-align:center;">中间是标题</div>-->

    <!--todo 如果float方向和margin负值的方向不一致... 表现就很混乱了-->
</div>

</body>
</html>
